<template>
  <!-- 通用搜索 -->
  <transition name="el-zoom-in-bottom" mode="out-in">
    <ComSearch
      v-show="
        props.buttons.includes('comSearch') && baTable.table.showComSearch
      "
    />
  </transition>
  <!-- 操作按钮组 -->
  <div class="table-header">
    <!-- 刷新按钮 -->
    <el-tooltip
      v-if="props.buttons.includes('refresh')"
      :content="t('tableHeader.刷新')"
      placement="top"
    >
      <el-button
        v-blur
        @click="onAction('refresh', { loading: true })"
        color="#40485b"
        class="table-header-operate"
        type="info"
      >
        <!-- 刷新按钮 -->
        <el-icon>
          <Refresh />
        </el-icon>
      </el-button>
    </el-tooltip>
    <el-tooltip
      v-if="props.buttons.includes('refreshistory')"
      :content="t('tableHeader.刷新历史')"
      placement="top"
    >
      <el-button
        v-blur
        @click="onAction('refreshistory', { loading: true })"
        color="#40485b"
        class="table-header-operate"
        type="info"
      >
        <!-- 刷新按钮 -->
        <el-icon>
          <Refresh />
        </el-icon>
      </el-button>
    </el-tooltip>
    <!-- 返回大屏按钮 -->
    <el-tooltip
      v-if="props.buttons.includes('back')"
      :content="t('tableHeader.返回大屏')"
      placement="top"
    >
      <el-button
        v-blur
        @click="onAction('back', { loading: true })"
        color="red"
        class="table-header-operate"
        type="info"
        :disabled="access.switch"
      >
        <el-icon><Switch /></el-icon>
        <span class="table-header-operate-text">大屏</span>
      </el-button>
    </el-tooltip>
    <!-- 巡检按钮 -->
    <el-tooltip
      v-if="props.buttons.includes('inspection')"
      :content="t('tableHeader.巡检')"
      placement="top"
    >
      <el-button
        v-blur
        @click="onAction('inspection', '')"
        color="green"
        class="table-header-operate"
        type="info"
        :disabled="!enableBatchOpt"
      >
        <el-icon><Aim /></el-icon>
        <span class="table-header-operate-text">巡检</span>
      </el-button>
    </el-tooltip>
    <!-- 添加按钮 -->
    <el-tooltip
      v-if="props.buttons.includes('add') && auth('add')"
      :content="t('tableHeader.添加')"
      placement="top"
    >
      <!-- <el-tooltip v-if="props.buttons.includes('add')" content="添加" placement="top"> -->
      <el-button
        v-blur
        @click="onAction('add', '')"
        class="table-header-operate"
        type="primary"
      >
        <el-icon>
          <Plus />
        </el-icon>
        <span class="table-header-operate-text">
          {{ t("tableHeader.添加") }}
        </span>
      </el-button>
    </el-tooltip>
    <!-- 编辑按钮 -->
    <el-tooltip
      v-if="props.buttons.includes('edit') && auth('edit')"
      :content="t('tableHeader.编辑')"
      placement="top"
    >
      <!-- <el-tooltip v-if="props.buttons.includes('edit')" content="编辑" placement="top"> -->
      <!-- <el-button v-blur @click="onAction('edit','')" :disabled="!enableBatchOpt" class="table-header-operate" -->
      <el-button
        v-blur
        @click="onAction('edit', '')"
        class="table-header-operate"
        type="primary"
        :disabled="!enableEditchOpt"
      >
        <el-icon>
          <EditPen />
        </el-icon>
        <span class="table-header-operate-text">
          {{ t("tableHeader.编辑") }}
        </span>
      </el-button>
    </el-tooltip>
    <!-- 删除按钮 -->
    <el-popconfirm
      v-if="props.buttons.includes('remove') && auth('remove')"
      :content="t('tableHeader.删除')"
      @confirm="onAction('remove', '')"
      :confirm-button-text="t('tableHeader.删除')"
      :cancel-button-text="t('tableHeader.取消')"
      confirmButtonType="danger"
      :title="t('tableHeader.确定删除当前选择')"
      :disabled="!enableBatchOpt"
    >
      <template #reference>
        <div class="mlr-12">
          <el-tooltip :content="t('tableHeader.删除')" placement="top">
            <el-button
              v-blur
              class="table-header-operate"
              type="danger"
              :disabled="!enableBatchOpt"
            >
              <el-icon>
                <Delete />
              </el-icon>
              <span class="table-header-operate-text">
                {{ t("tableHeader.删除") }}</span
              >
            </el-button>
          </el-tooltip>
        </div>
      </template>
    </el-popconfirm>
    <!-- 上传文件按钮 -->
    <el-tooltip
      v-if="props.buttons.includes('upload') && auth('upload')"
      :content="t('tableHeader.导入')"
      placement="top"
    >
      <!-- <el-tooltip v-if="props.buttons.includes('add')" content="添加" placement="top"> -->
      <el-button
        v-blur
        @click="onAction('upload', '')"
        class="table-header-operate"
        type="primary"
      >
        <el-icon><UploadFilled /></el-icon>
        <span class="table-header-operate-text">{{
          t("tableHeader.上传")
        }}</span>
      </el-button>
    </el-tooltip>
    <!-- 导出列表按钮 -->
    <el-tooltip
      v-if="props.buttons.includes('export') && auth('export')"
      :content="t('tableHeader.导出')"
      placement="top"
    >
      <!-- <el-tooltip v-if="props.buttons.includes('add')" content="添加" placement="top"> -->
      <el-button
        v-blur
        @click="onAction('export', '')"
        class="table-header-operate"
        type="warning"
      >
        <!-- <el-icon><UploadFilled /></el-icon> -->
        <Icon size="13" name="fa fa-mail-forward" />
        <span class="table-header-operate-text">{{
          t("tableHeader.导出")
        }}</span>
      </el-button>
    </el-tooltip>
    <!-- 打印二维码按钮 -->
    <el-tooltip
      v-if="props.buttons.includes('print') && auth('print')"
      :content="t('tableHeader.打印')"
      placement="top"
    >
      <!-- <el-tooltip v-if="props.buttons.includes('add')" content="添加" placement="top"> -->
      <el-button
        v-blur
        @click="onAction('print', '')"
        class="table-header-operate"
        type="success"
        :disabled="!enableBatchOpt"
      >
        <el-icon><Printer /></el-icon>
        <span class="table-header-operate-text">{{
          t("tableHeader.批量打印")
        }}</span>
      </el-button>
    </el-tooltip>
    <!-- 批量下单 -->
    <el-tooltip
      v-if="props.buttons.includes('placeOrder') && auth('placeOrder')"
      :content="t('tableHeader.下单')"
      placement="top"
    >
      <!-- <el-tooltip v-if="props.buttons.includes('add')" content="添加" placement="top"> -->
      <el-button
        v-blur
        @click="onAction('placeOrder', '')"
        class="table-header-operate"
        type="success"
        :disabled="!enableBatchOpt"
      >
        <el-icon><Files /></el-icon>
        <span class="table-header-operate-text">{{
          t("tableHeader.批量下单")
        }}</span>
      </el-button>
    </el-tooltip>
    <!-- 展开列表 -->
    <el-tooltip
      v-if="props.buttons.includes('unfold')"
      :content="
        baTable.table.expandAll
          ? t('tableHeader.收缩所有')
          : t('tableHeader.展开所有')
      "
      placement="top"
    >
      <el-button
        v-blur
        @click="changeUnfold"
        class="table-header-operate"
        :type="baTable.table.expandAll ? 'danger' : 'warning'"
      >
        <span class="table-header-operate-text">{{
          baTable.table.expandAll
            ? t("tableHeader.收缩所有")
            : t("tableHeader.展开所有")
        }}</span>
      </el-button>
    </el-tooltip>
    <!-- 右侧搜索框和工具按钮 -->
    <slot></slot>
    <div class="table-search">
      <el-input
        v-if="props.buttons.includes('quickSearch')"
        v-model="state.quickSearch"
        class="xs-hidden quick-search"
        @input="debounce(onSearchInput, 500)"
        :placeholder="
          quickSearchPlaceholder
            ? quickSearchPlaceholder
            : t('tableHeader.搜索')
        "
      />
      <div
        class="table-search-button-group"
        v-if="
          props.buttons.includes('columnDisplay') ||
          props.buttons.includes('comSearch')
        "
      >
        <el-dropdown
          v-if="props.buttons.includes('columnDisplay')"
          :max-height="380"
          :hide-on-click="false"
        >
          <el-button
            class="table-search-button-item"
            :class="props.buttons.includes('comSearch') ? 'right-border' : ''"
            color="#dcdfe6"
            plain
          >
            <el-icon>
              <Grid style="color: black" />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, idx) in columnDisplay" :key="idx">
                <el-checkbox
                  v-if="item.prop"
                  @change="onChangeShowColumn($event, item.prop!)"
                  :checked="!item.show"
                  :model-value="item.show"
                  size="small"
                  :label="item.label"
                />
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-tooltip
          v-if="props.buttons.includes('comSearch')"
          :content="t('tableHeader.展开通用搜索')"
          placement="top"
        >
          <el-button
            @click="baTable.table.showComSearch = !baTable.table.showComSearch"
            class="table-search-button-item"
            color="#dcdfe6"
            plain
          >
            <el-icon>
              <Search style="color: black" />
            </el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, computed, inject } from "vue";
import { debounce, auth } from "@/utils/common"; //防抖与按钮鉴权
import type baTableClass from "@/utils/baTable";
import { useAccess } from "@/store/backend/DeviceM/access";
import { useI18n } from "vue-i18n";
import { useNavTabs } from "@/store/navTabs";
import { useRoute } from "vue-router";

const access = useAccess();
const { t } = useI18n();
const baTable = inject("baTable") as baTableClass;
const navTabs = useNavTabs();
const route = useRoute();

//默认的quickSearch为空字符串
const state = reactive({
  quickSearch: "",
});

/* 表头支持的按钮 */
type HeaderOptButton =
  | "refreshistory"
  | "refresh"
  | "add"
  | "edit"
  | "remove"
  | "unfold"
  | "recycle bin"
  | "comSearch"
  | "quickSearch"
  | "columnDisplay"
  | "back"
  | "inspection"
  | "upload"
  | "print"
  | "placeOrder"
  | "export";
interface Props {
  buttons: HeaderOptButton[];
  quickSearchPlaceholder?: string;
}
const props = withDefaults(defineProps<Props>(), {
  buttons: () => {
    return ["refresh", "add", "edit", "remove", "refreshistory", "back"];
  },
  quickSearchPlaceholder: "",
});

const enableBatchOpt = computed(() =>
  baTable.table.selection!.length > 0 ? true : false
);
// 编辑按钮可以多选
const enableEditchOpt = computed(
  () => true
  // baTable.table.selection!.length == 1 ? true : false
  // baTable.table.selection!.length == 1 ? true : false
);
// 子组件派发出去的事件
const emits = defineEmits<{
  (e: "action", event: string, data: any): void;
}>();

const onAction = (event: string, data: any) => {
  emits("action", event, data);
};

// 折叠或者展开表格
const changeUnfold = () => {
  emits("action", "unfold", { unfold: !baTable.table.expandAll });
};
//模糊搜索
const onSearchInput = () => {
  emits("action", "quick-search", { keyword: state.quickSearch });
};

//获取baTable.table.column数据
//enableColumnDisplayControl 是否在下拉菜单的复选框显示 默认为true显示
const columnDisplay = computed(() => {
  let columnDisplayArr = [];
  for (let item of baTable.table.column) {
    item.type === "selection" ||
    item.render === "buttons" ||
    item.enableColumnDisplayControl === false
      ? ""
      : columnDisplayArr.push(item);
  }
  return columnDisplayArr;
});

//展开通用搜索
const onChangeShowColumn = (
  value: string | number | boolean,
  field: string
) => {
  console.log(
    "展开通用搜索",
    value,
    field,
    route.path,
    route.path + "/" + field
  );
  //列表隐显本地缓存
  columnDisplayStore(value, field, route.path);

  emits("action", "change-show-column", { field: field, value: value });
};
//列表隐显本地缓存
const columnDisplayStore = (value: any, field: any, path: string) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    (navTabs as any).columnDisplayStoreMap.set(path + "/" + field, value);
  } else {
    const m = new Map();
    m.set(path + "/" + field, value);
    (navTabs as any).columnDisplayStoreMap = m;
  }
};
</script>
<style lang="scss" scoped>
.table-header {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  background-color: var(--ba-bg-color-overlay);
  border: 1px solid var(--ba-border-color);
  border-bottom: none;
  padding: 13px 15px;
  font-size: 14px;

  .table-header-operate-text {
    margin-left: 6px;
  }
}

.mlr-12 {
  margin-left: 12px;
}

.mlr-12 + .el-button {
  margin-left: 12px;
}

.table-search {
  display: flex;
  margin-left: auto;

  .quick-search {
    width: auto;
  }
}

.table-search-button-group {
  display: flex;
  margin-left: 12px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  overflow: hidden;

  button:focus,
  button:active {
    background-color: var(--ba-bg-color-overlay);
  }

  button:hover {
    background-color: var(--el-color-info-light-7);
  }

  .table-search-button-item {
    border: none;
    border-radius: 0;
  }

  .el-button + .el-button {
    margin: 0;
  }

  .right-border {
    border-right: 1px solid var(--el-border-color);
  }
}
</style>
